<template>
  <section class="GridDemo">
    <!-- :style="itemStyle[index] ? itemStyle[index] : {}" -->
    <div
      class="box"
      :style="boxStyle"
    >
      <div
        class="item"
        v-for="(item2,index) in 64"
        :key="item2"
        :style="itemStyle[index] ? itemStyle[index] : {}"
      />
    </div>
    <oce-grid
      class="grid"
      :grid-data="gridData"
      :column="4"
      :row="4"
      :sizes="item"
    >
      <template slot-scope="scope">
        <div class="gridItem">
          {{ scope.row.label }}
        </div>
      </template>
    </oce-grid>
    <el-button>4</el-button>
    <el-button>6</el-button>
    <el-button>8</el-button>
  </section>
</template>

<script>
export default {
  name: "GridDemo",
  data() {
    let column = 4
    let row = 6
    return{
      boxStyle:{
        gridTemplateColumns: `repeat(${column}, ${100/column}%)`,
        gridTemplateRows: `repeat(${row}, ${100/row}%)`
      },
      item: [[2,2],[2,2],[3,1]],
      gridData:[
        {
          'label': '1',
          'hide': false
        },
        {
          'label': '2',
          'hide': true
        },
        {
          'label': '3',
          'hide': false
        },
        {
          'label': '4',
          'hide': true
        }
      ]
    }
  },
  computed: {
    itemStyle() {
      let items = this.item.map(item => {
        return {
          background: 'chartreuse',
          gridColumnEnd: `span ${item[0]}`,
          gridRowEnd: `span ${item[1]}`
        }
      })
      return items 
    }
  },
  mounted() {
    console.log(this.itemStyle)
  }
}
</script>

<style lang="scss" scoped>
.GridDemo{
  width: 100%;
  height: 100%;
}
.box{
  width: 800px;
  height: 800px;
  background: bisque;
  margin: auto;
  display: grid;
  // grid-template-columns: repeat(8, 12.5%);
  // grid-template-rows: repeat(8, 12.5%);
  overflow: hidden;

  // .item:nth-child(1) {
  //   background: chartreuse;
  //   grid-column-end: span 2;
  //   grid-row-end: span 2;
  // }
  // .item:nth-child(2) {
  //   background: chartreuse;
  //   grid-column-end: span 3;
  //   grid-row-end: span 3;
  // }
  // .item:nth-child(3) {
  //   background: chartreuse;
  //   grid-column-end: span 1;
  //   grid-row-end: span 3;
  // }

  .item{
    background: cadetblue;
    border: 1px solid #bbb;
  }
  
}
.grid{
  width:500px;
  height:500px;
  border: 1px solid #bbb;
}
.gridItem{
  height: 100%;
  width: 100%;
  background-color: #DFE7F2;
  border: 1px solid #bbb;
}
</style>